<div {% if layout == 'Grid' %}
     class="grid grid-cols-1 min-[1200px]:grid-cols-2 min-[1600px]:grid-cols-3 gap-5 pb-5"
     {% else %}
     class="flex flex-col gap-y-5 pb-5"
     {% endif %}
>
    {% for pdf in page_obj %}
    {% widthratio current_page|add:-1 1 items_per_page as loop_offset %}
    {% with loop_id=forloop.counter|add:loop_offset %}
    <div x-data="{ show_actions_{{ loop_id }}: false }"
         id="pdf-{{ loop_id }}"
         class="h-min relative border rounded-md bg-slate-100 border-slate-300 hover:border-slate-400
                dark:bg-slate-800 dark:border-slate-700 dark:hover:border-slate-600
                creme:bg-creme-dark-light creme:border-creme-dark creme:hover:border-stone-400">
        <div class="px-3 py-1">
            {% if layout == 'Compact' %}
            {% include 'includes/pdf_overview/compact_pdf.html' %}
            {% else %}
            {% include 'includes/pdf_overview/spacious_pdf.html' %}
            {% endif %}
        </div>
        {% include 'includes/pdf_overview/pdf_actions_menu.html' %}
        {% if request.user.profile.show_progress_bars == 'Enabled' and pdf.number_of_pages > 0 %}
        <div class="hover:cursor-pointer" x-data="{ tooltip_progress: false }" id="progressbar-{{ loop_id }}">
                <div x-on:mouseenter="tooltip_progress = true" x-on:mouseleave="tooltip_progress = false"
                     class="w-full h-1 rounded-sm">
                    <div style="width: {{ pdf.progress }}%;" class="h-1 bg-primary! rounded-sm"></div>
                </div>
                <span x-show="tooltip_progress" x-transition:enter.duration.500ms x-cloak
                    class="z-50 absolute bg-primary text-gray-100 text-sm rounded-xs p-2 mt-1">
                 {{ pdf.progress }}% - Page {{ pdf.current_page_for_progress }} of {{ pdf.number_of_pages }}
                </span>
        </div>
        {% endif %}
    </div>
    {% endwith %}
    {% endfor %}
</div>

{% include 'includes/get_next_page.html' with get_next_overview_page_name='get_next_pdf_overview_page' %}
